<template>
  <div class="h-100vh bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="shadow">
      <div class="mx-6">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <div class="flex items-center">
            <img src="/src/assets/logo.jpg" alt="logo" class="w-10 h-10 rounded-full">
            <div class="ml-4 text-2xl font-bold transition-all duration-300 drop-shadow-lg group relative animate-pulse" style="font-family: 'Source Han Sans CN', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.05em;">
              <span class="relative inline-block bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                {{ pageTitle }}
                <div class="absolute -bottom-1 left-0 w-full h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out"></div>
              </span>
            </div>
          </div>
          </div>
          <div class="flex items-center space-x-4">
            <!-- 系统切换按钮 -->
            <!-- <div class="flex bg-gray-100 rounded-lg p-1">
              <button
                @click="switchSystem('pmpu')"
                :class="[
                  'px-3 py-1 text-sm font-medium rounded-md transition-colors',
                  currentSystem === 'pmpu'
                    ? 'bg-white text-blue-600 shadow-sm'
                    : 'text-gray-600 hover:text-gray-900'
                ]"
              >
                PMPU
              </button>
              <button
                @click="switchSystem('five')"
                :class="[
                  'px-3 py-1 text-sm font-medium rounded-md transition-colors',
                  currentSystem === 'five'
                    ? 'bg-white text-blue-600 shadow-sm'
                    : 'text-gray-600 hover:text-gray-900'
                ]"
              >
                Five
              </button>
            </div> -->
            <span class="text-sm text-gray-500">{{ getCurrentUser?.username || '管理员' }}</span>
            <Button 
              icon="pi pi-sign-out" 
              severity="secondary" 
              text 
              @click="logout"
              class="text-gray-500 hover:text-gray-700"
            />
          </div>
        </div>
      </div>
    </header>

    <div class="flex h-[calc(100vh-64px)]">
      <!-- 侧边栏 -->
      <aside class="w-48 bg-white shadow-sm h-full">
        <nav class="mt-8">
          <div class="px-4 space-y-2">
            <router-link
              v-for="item in menuItems"
              :key="item.path"
              :to="item.path"
              class="flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors"
              :class="[
                $route.path.includes(item.path)
                  ? 'bg-blue-50 text-blue-700'
                  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
              ]"
            >
              <i :class="item.icon" class="mr-3"></i>
              {{ item.name }}
            </router-link>
          </div>
        </nav>
      </aside>
      <!-- 主内容区域 -->
      <main class="flex-1 p-6 h-full">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuth } from '../../composables/useAuth.js'

const router = useRouter()
const route = useRoute()
const { clearAuth, getCurrentUser } = useAuth()

// 根据当前路由判断是哪个系统
const currentSystem = computed(() => {
  if (route.path.startsWith('/backstage/five')) {
    return 'five'
  }
  return 'pmpu'
})

// 根据系统类型获取标题
const pageTitle = computed(() => {
  return currentSystem.value === 'five' 
    ? '大五人格测评后台管理' 
    : '问题性手机使用测评后台管理'
})

// 根据系统类型获取菜单项
const menuItems = computed(() => {
  const basePath = currentSystem.value === 'five' ? '/backstage/five' : '/backstage/pmpu'
  
  return [
    {
      name: '问卷管理',
      path: `${basePath}/questionnaire`,
      icon: 'pi pi-file-edit'
    },
    {
      name: '用户管理',
      path: `${basePath}/user`,
      icon: 'pi pi-users'
    },
    {
      name: '答题记录',
      path: `${basePath}/answer-record`,
      icon: 'pi pi-chart-bar'
    }
  ]
})

// 系统切换方法
const switchSystem = (system) => {
  if (system === 'five') {
    router.push('/backstage/five/questionnaire')
  } else {
    router.push('/backstage/pmpu/questionnaire')
  }
}

const logout = () => {
  // 清除认证信息
  clearAuth()
  // 清除原有的 sessionStorage
  sessionStorage.removeItem('pmp-token')
  sessionStorage.removeItem('pmp-userInfo')
  // 重定向到首页
  router.push('/pmpu')
}
</script>

<style scoped>
/* 可以添加自定义样式 */
</style> 